<template>
  <div class="singers">
    <index-scroll :data="data" @select="selectSinger"></index-scroll>
    <router-view></router-view>
  </div>
</template>

<script>
  import IndexScroll from 'base/index-list/index-list'
  import {getSingers} from 'api/singers'
  import {ERR_OK} from 'api/conf'

  const HOT_NAME = '热门'
  const HOT_LENGTH = 10

  export default {
    data () {
      return {
        data: []
      }
    },
    methods: {
      selectSinger (item) {
        this.$router.push('/singers/' + item.id)
      },
      _getSingers () {
        getSingers().then((res) => {
          if (res.code === ERR_OK) {
            this.data = this._formatData(res.data.list)
          }
        })
      },
      _formatData (list) {
        console.log(list)
        let data = []
        let res = []

        let hot = [
          {
            title: HOT_NAME,
            items: []
          }
        ]

        list.forEach(function (item, index) {
          let key = item.Findex

          if (hot[0].items.length < HOT_LENGTH) {
            hot[0].items.push({
              id: item.Fsinger_mid,
              name: item.Fsinger_name,
              avatar: `https://y.gtimg.cn/music/photo_new/T001R300x300M000${item.Fsinger_mid}.jpg?max_age=2592000`
            })
          }

          if (!data[key]) {
            data[key] = {
              title: key,
              items: []
            }
          }

          data[key].items.push({
            name: item.Fsinger_name,
            id: item.Fsinger_mid,
            avatar: `https://y.gtimg.cn/music/photo_new/T001R300x300M000${item.Fsinger_mid}.jpg?max_age=2592000`
          })
        })
        for (let x in data) {
          res.push(data[x])
        }

        // 排序
        res.sort(function (a, b) {
          return a.title.charCodeAt(0) - b.title.charCodeAt(0)
        })

        return hot.concat(res)
      }
    },
    created () {
      this._getSingers()
    },
    components: {
      IndexScroll
    }
  }
</script>

<style scoped lang="stylus">
.singers
  position fixed
  top 90px
  left 0
  bottom 0
  width 100%
</style>
